<template>
<view class="page-all">
	<Header title="选择学校" bgColor="#fff" :leftIconSize="20" ></Header>
	<view class="search-content">
		<view class="left">
			<uv-search placeholder="学校名称" bgColor="#fff" v-model="queryForm.name" :showAction="false"  @change="searchFun()" @clear="clearFun()"  @blur="searchFun()"></uv-search>
		</view>
		<view class="screen-icon" @click="showScreen">
            <image v-if="iconFlag === true" src="@/static/image/index/icon2.png" mode="widthFix"></image>
            <image v-else src="@/static/image/index/icon1.png" mode="widthFix"/>
		</view>
	</view>
    <view v-if="emptyFlag" class="empty-box">
        <uv-empty mode="data" icon="/static/image/no-data.png" width="200rpx" height="260rpx" text="&nbsp;"/>
    </view>
	<!--学校列表-->
	<view class="school-list" v-else>
        <view class="top-choose">
            <view>
                <checkbox-group @change="allSelect">
                    <label class="cu-checked-group">
                        <checkbox hidden color="#FFFFFF" value="2" />
                        <view class="cu-checkbox" v-if="checkType!==2" :class="checkType===1 ? 'check-not-full' : (checkType===2 ? 'check-full': 'check-not')">
                            <view class="uni-checkbox-input"></view>
                        </view>
                        <view class="cu-checkbox check-full" v-if="checkType===2">
                            <view class="uni-checkbox-input">
                                <image src="../../../static/image/check.png"></image>
                            </view>
                        </view>
                        <text class="text">全选</text>
                    </label>
                </checkbox-group>
            </view>
            <view>已选择：{{ checkboxValue.length }}/{{ dataList.length }}</view>
        </view>
        <view class="s-check-group">
            <uv-checkbox-group v-model="checkboxValue" iconPlacement="left" placement="column" @change="changeCheck">
                <uv-checkbox
                        v-for="(item, index) in dataList"
                        :key="index" :label="item.name"
                        :name="item.id"
                ></uv-checkbox>
            </uv-checkbox-group>
        </view>
        <!--<uv-checkbox-group v-model="checkboxValue" @change="changeCheck">-->
            <!--<view class="item check-item" :key="index">-->
                <!--<view class="radio">-->
                    <!--<uv-checkbox-->
                            <!--v-for="(item, index) in dataList"-->
                            <!--:key="index" :label="item.name"-->
                            <!--:name="item.id"-->
                    <!--&gt;</uv-checkbox>-->
                <!--</view>-->
            <!--</view>-->
        <!--</uv-checkbox-group>-->
	</view>
	<!--筛选弹层-->
    <uv-popup ref="popup" @change="change" :closeable="true">
        <view class="popup-title">筛选</view>
        <view class="popup-content">
            <view class="popup-title-row">
                <text>办学性质</text>
            </view>
            <view class="popup-con-row">
                <view class="item" :class="{actived:schoolPropertiesCode==item.value}" v-for="(item,index) in natureList" :key="index"
                      @click="schoolPropertiesCode=item.value">{{item.name}}</view>
            </view>
            <view class="popup-title-row">
                <text>办学类型</text>
            </view>
            <view class="popup-con-row">
                <view class="item" :class="{ actived: doSchoolTypeCode == item.value }" v-for="(item, index) in typeList"
                      :key="index" @click="doSchoolTypeCode=item.value">
                    {{ item.name }}
                </view>
            </view>
            <view class="popup-title-row"  v-if="areaList.length>0">
                <text>地区</text>
            </view>
            <view class="popup-con-row">
                <view v-for="(item,index) in areaList" :key="index" class="item" style="display: flex;align-items: center;justify-content: center;;"
                      :class="{actived:item.code === area}" @click="areaFun(item)">
                    {{ item.name }}
                </view>
            </view>
            <view class="bottom-box" @click.stop>
                <button class="yellow-sure-button" style="width: 49%" @click.stop="resetForm()">重置</button>
                <button class="sure-button" @click.stop="popupSubmit()">确认</button>
            </view>
        </view>
    </uv-popup>
	<view class="check-bottom-box" @click.stop>
	  <button class="sure-button" @click.stop="submit()">确认</button>
	</view>

</view>
</template>

<script setup>
    import {getCurrentInstance,reactive, ref} from 'vue'
    const {proxy} = getCurrentInstance();
    import publicAPI from "@/api/law/public/public";
    import supDataScopeAPI from "@/api/law/supDataScope/supDataScope";
    import dictApi from "@/api/dict/dict";
    import {onLoad} from "@dcloudio/uni-app";
    import config from "@/common/config";
    let imgMinioPath = ref(config.IMG_MINIO_PATH);
    const userInfo = ref(uni.getStorageSync('userInfo'));
    let isAllSelected = ref(false)
	const checkboxValue = ref([])
    let iconFlag = ref(false);
    const schoolPropertiesCode = ref()  //选中的学校性质
    const doSchoolTypeCode = ref()  //选中的办学类型
    let dataList=ref([])
    let natureList = ref([])
    const entryType = ref("2");
    let checkType = ref(0)
    let typeList = ref([]);
    const emptyFlag = ref(false);
    const queryForm = reactive({ // 查询条件
        name:'',
        schoolPropertiesCode:'',
        doSchoolTypeCode:'',
        params:{
            sourceIds: '',
        }
    });
    function resetForm() {
        iconFlag.value = false;
        schoolPropertiesCode.value = '';
        doSchoolTypeCode.value = '';
        area.value = '';
        queryForm.name= '';
        queryForm.schoolPropertiesCode=schoolPropertiesCode.value
        queryForm.doSchoolTypeCode=doSchoolTypeCode.value
        if (areaType.value === '1') {
            queryForm.cityId = area.value;
        } else {
            queryForm.countyId = area.value;
        }
        changeIcon();
        popup.value.close()
        getSchoolList();
    }

    onLoad((option) => {
        if (option.list) {
            let list = JSON.parse(decodeURIComponent(option.list));
            checkboxValue.value = list.map(item => item.schoolId); // 全选
        }
    });

    // 单个选中
    function changeCheck(){
        if (checkboxValue.value.length == dataList.value.length && dataList.value.length !== 0){
            isAllSelected.value = true
        }else {
            isAllSelected.value = false
        }
        changeCss();
    }
    // 全选按钮
    function allSelect(){
        isAllSelected.value = isAllSelected.value ? false : true
        if (isAllSelected.value) {
           checkboxValue.value = dataList.value.map(item => item.id); // 全选
            checkType.value = 2;
        } else {
            checkboxValue.value = []; // 取消全选
            checkType.value = 0;
        }
    }
    const changeCss = () =>{
        if(!checkboxValue.value.length){
            checkType.value = 0
        }else if(checkboxValue.value.length == dataList.value.length){
            checkType.value = 2
        }else{
            checkType.value = 1
        }
    }

	//返回把选中学校数据传回
	function submit(){
		uni.navigateBack({
		  delta: 1,
		  success: function(res) {
              let filteredList = dataList.value.filter(function(obj) {
                  return checkboxValue.value.includes(obj.id);
              });
		    uni.$emit('schoolData', filteredList)
		  }
		})
	}

	let popup = ref()
	//显示筛选弹层
	function showScreen(){
		popup.value.open('bottom')
	}

    let searchFun = () => {
        getSchoolList();
    };
    /** 清空搜索 */
    let clearFun = () => {
        getSchoolList();
    }
    let changeIcon = () => {
      if (queryForm.schoolPropertiesCode || queryForm.doSchoolTypeCode || queryForm.countyId) {
        iconFlag.value = true;
      } else {
        iconFlag.value = false;
      }
    }
	function popupSubmit(){
        queryForm.schoolPropertiesCode=schoolPropertiesCode.value
        queryForm.doSchoolTypeCode=doSchoolTypeCode.value
        if (areaType.value === '1') {
            queryForm.cityId = area.value;
        } else {
            queryForm.countyId = area.value;
        }
        changeIcon();
        popup.value.close()
        getSchoolList();
	}

    let getSchoolList = async () => {
        let res = await proxy.http.asyncPost(supDataScopeAPI.findDistrictList, {dataUserId:userInfo.value.user.id});
        if (res.code === 0) {
          if(res.data.sourceIds) {
            queryForm.params.sourceIds = res.data.sourceIds
            res = await proxy.http.asyncPost(publicAPI.getOrgSchoolNoTenantId, queryForm);
            if (res.code === 0) {
              dataList.value = [...res.data];
              changeCheck()
              emptyFlag.value = dataList.value.length <= 0;
            } else {
              await uni.showToast({title: res.msg, icon: 'none'});
            }
          }else{
            emptyFlag.value =true;
          }
        }else {
            await uni.showToast({title: res.msg, icon: 'none'});
        }
    };
    // let getSchoolList = async () => {
    //     let res= await proxy.http.asyncPost(publicAPI.getOrgSchoolNoTenantId, {schoolPropertiesCode:schoolPropertiesCode.value});
    //     if (res.code === 0) {
    //       dataList.value =  [...res.data];
    //         changeCheck()
    //     } else {
    //       await uni.showToast({title: res.msg, icon: 'none'});
    //     }
    // };


    //学校性质
    let getNatureList = async () => {
        let res = await proxy.http.asyncGet(dictApi.findDataListByType('school_properties'), {});
        if (res.code === 0) {
            natureList.value =  [...res.data];
            console.log(natureList.value)
        }
    }
    //获取码表-办学类型
    let getTypeList = async () => {
        let res = await proxy.http.asyncGet(dictApi.findDataListByType('do_school_type'), {});
        if (res.code === 0) {
            typeList.value = [...res.data];
        }
    }
    /** 筛选-地区 */
    const area = ref('');
    const areaList = ref([]);
    let areaType = ref('');
    // 获取地区列表
    let getAreaList = async () => {
        let query = {};
        if (userInfo.value.user.org.county) { // 区
            areaType.value = '3';
            return;
        } else if (userInfo.value.user.org.city) { // 市
            areaType.value = '2';
            query.parentCode = userInfo.value.user.org.city;
        } else { // 省
            areaType.value = '1';
            query.parentCode = userInfo.value.user.org.province;
        }
        let res = await proxy.http.asyncPost(publicAPI.getAreaListByParentCode(query.parentCode));
        if (res.code === 0) {
            areaList.value = reactive(res.data);
        }
    };
    // 筛选选中
    const areaFun = (item) => {
        if (area.value === item.code) {
            area.value = ''
        } else {
            area.value = item.code;
        }
    };

    //页面加载
    onMounted(async () => {
         getSchoolList();
         getNatureList();
        getTypeList();
        getAreaList();
    })
</script>

<style scoped lang="scss">
    .check-item{
        width: 100%;
    }

	.bottom-box{
		padding: 0;
	}
	.top-choose{
		display: flex;
		align-items: center;
		justify-content: space-between;
    ::v-deep .uv-checkbox__label-wrap:after{
      border-color: #ffffff!important;

    }
	}

</style>
<style scoped lang="scss">
    .cu-checked-group {
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: normal;
        /*border-bottom: 1px #eee solid;*/

        .text{
            margin-left: 5px;
            color: #303133;
            font-size: 16px !important;
        }
    }
    .cu-checkbox{
        font-family: uvicon-iconfont;
        position: relative;
        width: 18px;
        height: 18px;
        border: 1px solid #DCDFE6;
        border-radius: 3px;
        background-color: #fff;
        box-sizing: border-box;
        &.check-not {
            border: 2px solid #C8C9CC;
            background-color: #fff;
        }

        &.check-not-full {
            border-color: #007aff;
            background-color: #007aff;
            .uni-checkbox-input {
                position: absolute;
                /* #ifndef APP-NVUE */
                top: 3px;
                /* #endif */
                left: 3px;
                height: 6px;
                width: 10px;
                border-bottom-width: 2px;
                border-bottom-color: #e7e7e7;
                border-bottom-style: solid;
                transform-origin: center;
            }

        }

        &.check-full {
            border-color: #007aff;
            background-color: #007aff;
            .uni-checkbox-input image{
                width: 12px;
                height: 10px;
                margin-left: 2px;
                margin-top: 3px;
            }
        }
    }

</style>
